﻿@{
    Layout = "~/Views/Shared/MetroTileBase.cshtml";
}

<div id="QuotesTileWrapper">

    <blockquote style="font-family: 'Averia Libre', cursive; font-weight:normal; font-size: 1.15em;" data-bind="text: Quote"></blockquote>

    <cite style="float: right; margin-right: 15px; font-size: 0.85em;" data-bind="text: Author"></cite>

    <div style="width: 50px; height: 50px; position: absolute; bottom: -10px; left: -10px;" data-bind="click: RefreshQuote">
        <a class="Icon Fill RefreshCircled" href="javascript:void(0);"></a>
    </div>

</div>

<script type="text/javascript">
    var QuotesViewModel = function(quotesData) {

        var self = this;

        var quoteRefreshInterval = 45000;
        var quoteRefreshTimeoutId = -1;
        var quotes = quotesData;
        var isRefreshing = false;

        var remainingQuotes = [];
        var currentQuote = null;

        var jq = $("#QuotesTileWrapper blockquote, #QuotesTileWrapper cite");

        this.Quote = ko.observable('');
        this.Author = ko.observable('');

        this.RefreshQuote = function(){
            if(isRefreshing === true)
                return;
            refreshQuote();
        };

        function refreshQuote(isInit){

            isRefreshing = true;
            clearTimeout(quoteRefreshTimeoutId);

            if(remainingQuotes.length == 0)
                remainingQuotes = $.merge([], quotes);

            if(remainingQuotes.length == 0)
                return;

            var index = Math.round(Math.random() * (remainingQuotes.length - 1));

            currentQuote = remainingQuotes.splice(index, 1)[0];
            
            //Animation here
            if(currentQuote)
            {
                if(isInit === true)
                {
                    self.Quote(currentQuote.Description);
                    self.Author(currentQuote.Title);
                    quoteRefreshTimeoutId = setTimeout(refreshQuote, quoteRefreshInterval);
                    isRefreshing = false;
                }
                else
                {
                    jq.fadeOut(globalAnimationDuration);
                    jq.promise().done(function(){
                        self.Quote(currentQuote.Description);
                        self.Author(currentQuote.Title);
                        jq.fadeIn(globalAnimationDuration, function(){isRefreshing = false;});
                        quoteRefreshTimeoutId = setTimeout(refreshQuote, quoteRefreshInterval + globalAnimationDuration);
                    });
                }
            }
            else{
                quoteRefreshTimeoutId = setTimeout(refreshQuote, quoteRefreshInterval);
                isRefreshing = false;
            }
        };
        refreshQuote(true);
    };

    if(!quotesInitialized)
    {
        $.ajax("@Url.Action("FetchQuotes", "Tiles")", {
            dataType: 'json',
            type: 'POST',
            success: function (data, textStatus, jqXHR) {
                if(data && data.Items)
                    ko.applyBindings(new QuotesViewModel(data.Items), $("#QuotesTileWrapper")[0]);
            },
            error: function (jqXHR, textStatus, errorThrown) {
                //ko.applyBindings(new QuotesViewModel([]), $("#QuotesTileWrapper")[0]);
            }
        });
    }
    var quotesInitialized = true;
</script>